<template>
	<view>
		<view style="margin-bottom: 120rpx;">
			<u-sticky>
				<view class="tabs">
					<text class="tabItem" :class="{active : item.couponCategory == couponCategory}"
						v-for="(item, index) in tabs" :key="item.couponCategory" @click="changeTab(item.couponCategory)">{{item.title}}</text>
				</view>
			</u-sticky>
			
			
			<view class="couponContent">
				<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback">
					<coupon-item v-for="(item, index) in list" :key="item.couponId" :couponInfo="item"
					:viewType="1"	@getCoupon="getCoupon"></coupon-item>
				</mescroll-body>
			</view>
		</view>
		
		
		<!-- 底部按钮 -->
		<view class="bottomView">
			<view class="btn leftBtn" @click="goRecord">
				使用记录
			</view>
			<view class="btn rightBtn" @click="goCoupon">
				继续领券
			</view>
		</view>
		
	</view>
</template>

<script>
	import couponItem from '@/components/coupon/coupon-item.vue'
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import {
		apiMemberCoupon
	} from '@/api/coupon-api.js'
	export default {
		mixins: [MescrollMixin], // 使用mixin
		components: {
			couponItem
		},
		data() {
			return {
				couponCategory: 0,
				tabs: [{
						title: '全部',
						couponCategory: 0
					},
					{
						title: '立减券',
						couponCategory: 3
					},
					{
						title: '满减券',
						couponCategory: 1
					},
					{
						title: '折扣券',
						couponCategory: 2
					}
				],
				list: []
			}
		},
		onLoad() {

		},
		methods: {
			/* 获取优惠券列表 */
			upCallback(page) {
				apiMemberCoupon({
					tenantId: this.$store.state.user.tenantId,
					pageNo: page.num,
					pageSize: page.size,
					couponCategory: this.couponCategory,
					memberCouponStatus : 0
				}).then(res => {
					//设置列表数据
					if (page.num == 1) this.list = []; //如果是第一页需手动制空列表
					this.list = this.list.concat(res.data); //追加新数据
					this.mescroll.endSuccess(res.data.length);
				}).catch(() => {
					//联网失败, 结束加载
					this.mescroll.endErr();
				})
			},
			changeTab(couponCategory) {
				this.couponCategory = couponCategory;
				this.mescroll.triggerDownScroll();
			},
			// 使用记录
			goRecord() {
				uni.navigateTo({
					url: './coupoon-record'
				})
			},
			
			goCoupon() {
				uni.switchTab({
					url: './coupon'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.tabs {
		padding: 20rpx 0;
        display: flex;
		justify-content: space-around;
		background-color: #F5F5F5;
		.tabItem {
			font-size: 28rpx;
			text-align: left;
			font-weight: bold;
			color: #666666;
            
			&.active {
				font-size: 32rpx;
				font-weight: bold;
				text-align: left;
				color: #3788ff;
			}
		}
	}

	.couponContent {
		margin: 20rpx;
	}
	
	.bottomView {
		display: flex;
		width: 100%;
		height: 96upx;
		line-height: 96upx;
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 3;
	}
	
	.btn {
		width: 50%;
		line-height: 100%;
		font-size: 33upx;
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
	}
	
	.leftBtn {
		color: #666;
		background-color: #FFFFFF;
		height: 96upx;
		line-height: 96upx;
		align-self: center;
		text-align: center;
	}
	
	.rightBtn {
		color: #fff;
		background-color: $main-color;
	}
	
</style>
